<template>
  <el-input autosize class="cu-input" :placeholder="placeholder" size="small" v-model.trim="name" @clear="onClear" clearable>
    <template #append>
      <el-button type="primary" @click="handleSelect">选择</el-button>
    </template>
  </el-input>
  <el-dialog
    title="选择用户"
    v-model="dialogState.show"
    width="600px"
    :close-on-press-escape="false"
    :close-on-click-modal="false"
    append-to-body
    destroy-on-close
  >
    <yt-crud
      v-if="dialogState.show"
      ref="crudRef"
      :data="data"
      :column="column"
      :table-props="{
        menu: false,
        selection: multiple,
      }"
      :fun-props="{
        hide: true
      }"
      :loading="state.loading"
      :total="state.total"
      v-model:page="state.page"
      v-model:query="state.query"
      @row-click="rowClick"
      @on-load="getData"
    >
      <template #status="scope">
        <DictTag :options="EnableStatusEnum" :value="scope.row.status" />
      </template>
    </yt-crud>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogState.show = false">关闭</el-button>
        <el-button type="primary" @click="handleMultiple">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script lang="ts" setup>
import { propTypes } from '@/utils/propTypes'
import { IColumn } from '../common/types/tableCommon'
import { listUser } from '@/api/system/user'

import YtCrud from '@/components/common/yt-crud.vue'
import {ComponentInternalInstance} from 'vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance
const { EnableStatusEnum } = toRefs<any>(proxy?.useEnum('enable_status_enum'))

const props = defineProps({
  id: propTypes.string.def(''),
  modelValue: propTypes.string.def(''),
  clearable: propTypes.bool.def(false),
  // 是否多选
  multiple: propTypes.bool.def(false),
  placeholder: propTypes.string.def('选择用户'),
})
const emits = defineEmits(['update:modelValue'])



watch(() => props.modelValue,
  (newV) => {
    console.log(newV)
  },
  {
    immediate: true,
    deep: true,
  }
)


const state = reactive({
  page: {
    pageSize: 10,
    pageNum: 1,
  },
  total: 0,
  loading: false,
  query: {

  },
})
// 单击
const crudRef = ref()

const rowClick = (row: any) => {
  if (props.multiple) {
    crudRef.value.getTableRef().tableRef.toggleRowSelection(toRaw(row), undefined)
    return
  }

  emits('update:modelValue', row.userName)
  dialogState.data = row
  dialogState.show = false
}

// 多选
const handleMultiple = () => {
  const rows = crudRef.value.getTableRef().tableRef.getSelectionRows()
  dialogState.data = {
    id: rows.map((m: any) => m.id).join(','),
    userName: rows.map((m: any) => m.userName).join(','),
  }
  emits('update:modelValue', dialogState.data.id)
  dialogState.show = false
}

// 清空
const onClear = () => {
  emits('update:modelValue', '')
  dialogState.data = {}
}
const dialogState = reactive({
  show: false,
  data: {} as any,
})
const name = computed(() => {
  return dialogState.data?.userName || props.modelValue || ''
})
const handleSelect = () => {
  dialogState.show = true
}
// 产品字典

const getDict = () => {
}
getDict()

const column = ref<IColumn[]>([
  {
    searchLabelWidth: 80,
    label: '用户名',
    key: 'userName',
    search: true,
  },


])
const data = ref([])

const getData = () => {
  state.loading = true
  listUser({
    ...state.query,
    ...state.page,
  }).then((res) => {
    data.value = res.data.rows || []
    state.total = res.data.total
  })
  state.loading = false
}
</script>

<style lang="scss" scoped>
.cu-input {
  cursor: pointer;
}
::v-deep(.el-input-group__append) {
  background-color: var(--el-color-primary);
  color: #fff;
}
</style>
